<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    .cont {
        width: 150px;
        height: 150px;
        position: relative;
        background-color: red;
        cursor: cell;
    }

    body {
        width: 100vw;
        height: 100vh;
        padding: 50px;
        margin: 0;
    }
</style>

<body>
    <button id="but">添加</button>
    <div class="content">
        <div class="cont" style="background-color: rgb(27, 50, 71);"></div>
        <div class="cont" style="background-color: rgb(243, 255, 240);"></div>
        <div class="cont" style="background-color: rgb(241, 240, 255);"></div>
        <div class="cont" style="background-color: rgb(245, 255, 240);"></div>
        <div class="cont" style="background-color: rgb(245, 255, 240);"></div>
        <div class="cont" style="background-color: rgb(255, 251, 240);"></div>
        <div class="cont" style="background-color: rgb(255, 240, 247);"></div>
        <div class="cont" style="background-color: rgb(255, 240, 253);"></div>
        <div class="cont" style="background-color: rgb(243, 255, 240);"></div>
        <div class="cont" style="background-color: rgb(255, 240, 253);"></div>
        <div class="cont" style="background-color: rgb(255, 240, 240);"></div>
        <div class="cont" style="background-color: rgb(255, 248, 240);"></div>
        <div class="cont" style="background-color: rgb(240, 254, 255);"></div>
        <div class="cont" style="background-color: rgb(245, 255, 240);"></div>
    </div>
</body>
<script type="module">
    import { gerRangeColor } from './model.js';

    suijifun();

    //监听随机事件
    function suijifun() {
        // 获取元素
        let divs = document.getElementsByClassName('cont');
        // 获取元素个数
        let len = divs.length;
        // 循环遍历
        for (let i = 0; i < len; i++) {
            // 获取元素
            let div = divs[i];
            // 获取窗口宽高度
            // 生成随机坐标
            let x = Math.floor(Math.random() * (window.innerWidth - 75));
            let y = Math.floor(Math.random() * (630 - 75));;
            // 设置元素坐标
            div.style.left = x + 'px';
            div.style.top = y + 'px';

            let disX = 0, disY = 0;
            //监听拖动div元素
            div.onmousedown = function (e) {
                console.log(e.target.style.left);
                // 鼠标按下时，计算鼠标与div元素之间的距离
                disX = parseInt(e.target.style.left);
                disY = parseInt(e.target.style.top);
                let innerX = e.clientX - disX; // 获取鼠标在方块内的x轴距
                let innerY = e.clientY - disY; // 获取鼠标在方块内的y轴距

                for (let j = 0; j < len; j++) {
                    divs[j].style.zIndex = '1';
                }
                this.style.zIndex = '1000';
                // 鼠标移动时，计算div元素移动的距离
                let that = e.target;
                window.onmousemove = function (event) {
                    // 移动时，计算div元素移动的距离
                    let l = (event.clientX - innerX) + 'px';
                    let t = (event.clientY - innerY) + 'px';
                    console.log(l, t);
                    // 设置div元素的位置
                    that.style.left = l;
                    that.style.top = t;
                }

            }

            window.onmouseup = function () {
                window.onmousemove = null;
            }

        }

    }

    let but = document.getElementById('but');
    but.onclick = function () {
        let dives = document.createElement('div');
        dives.style.width = '150px';
        dives.style.height = '150px';
        dives.style.position = 'absolute';
        dives.classList.add('cont');
        dives.style.backgroundColor = gerRangeColor();
        document.querySelector(".content").appendChild(dives);
        suijifun();
    }
    
</script>

</html>